<template>
	<view class="payment">

		<view class="top-card-item">
			<view class="top-card-item-left">
				<view>{{type == 0 ? '登录密码': '支付密码'}}</view>
			</view>
			<view class="item-rights">
				<uni-easyinput
				 type="password"
				 v-model="login_pwd"
				 class="uni-input" 
				 :inputBorder="false"
				 :styles="{backgroundColor:'transparent'}"
				 placeholder-style="color:#D9D9D9;font-size:25rpx"
				 focus 
				 :placeholder="type == 0 ? '请输入登录密码':'请输入支付密码'" />
			</view>
		</view>
		<view class="top-card-item">
			<view class="top-card-item-left">确认密码</view>
			<view class="item-rights">
				<uni-easyinput
				  type="password"
				  v-model="new_login_pwd"
				  :inputBorder="false"
				  :styles="{backgroundColor:'transparent'}"
				  placeholder-style="color:#D9D9D9;font-size:25rpx"
				  class="uni-input" focus placeholder="请输入确认密码"  />
			</view>
		</view>
		
		<view class="top-card-item">
			<view class="top-card-item-left">手机号</view>
			<view class="item-rights">
				 <uni-easyinput
					:disabled="true"
				   type="number"
				   v-model="mobile"
				   :inputBorder="false"
				   :styles="{backgroundColor:'transparent'}"
				   placeholder-style="color:#D9D9D9;font-size:25rpx"
				   class="uni-input" focus placeholder="请输入确认密码"  />
			</view>
		</view>
		
		
		
		
		<view class="top-card-item">
			<view class="top-card-item-left">
				<view>验证码</view>
			</view>
			<view class="item-rights2">
				<input 
				placeholder-style="color:#D9D9D9;font-size:25rpx"
				v-model="code"  focus placeholder="请输入验证码" />
				<view class="cpoy" @click="sendCode()">
					{{codeText}}
				</view>
			</view>
		</view>



		<view class="appeal-submit" @click="submit()">
			<view class="appeal-submit-buttom">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '../../asset/lib/md5.js'
	export default {
		data() {
			return {
				mobile: '',
				login_pwd: '',
				new_login_pwd: '',
				code: '',
				type:0,
				codeText:'发送',
				codeTime:59,
			};
		},
		onLoad(opt) {
			this.mobile = opt.mobile
			this.type = opt.type
		},
		methods: {
			getTextCode(){
				  var that =this
				  let inter = 	setInterval(function() {
						if (that.codeTime <= 0) {
							clearInterval(inter);
							that.codeText= "发送"
							that.codeTime = 59
							return false;
						}
						// console.log(that.codeTime)
						that.codeText =that.codeTime+"秒"
						that.codeTime -= 1;
					}, 1000);
				},
			submit(){
				let data = {}
				if(!this.login_pwd){
					uni.showToast({
						title:'密码不能为空',
						icon:'none'
					})
					return
				}
				if(this.new_login_pwd != this.login_pwd ){
					uni.showToast({
						title:'两次密码不相同',
						icon:'none'
					})
					return
				}
				// if(this.type == 0){
				// 	data = 	{
				// 		phone:this.mobile,
				// 		captcha:this.code,
				// 		password:this.login_pwd,
				// 		confirm_password:this.new_login_pwd
				// 	}
				// }else{
				// 	data = 	{
				// 		mobile:this.mobile,
				// 		captcha:this.code,
				// 		password:this.login_pwd,
				// 		confirm_password:this.new_login_pwd
				// 	}
				// }
				data = 	{
					mobile:this.mobile,
					captcha:this.code,
					password:this.login_pwd,
					confirm_password:this.new_login_pwd
				}
				let url = this.type == 0 ? "user/resetpwd" : 'user/resetPayPwd'
				this.api.http.requests(url, data, res => {
					uni.showToast({
						title: res.msg,
						success: function() {
							setTimeout(function() {
								//要延时执行的代码
								uni.navigateBack();
							}, 2000) //延迟时间 
						}
					})
				}, "POST")
				
			},
			sendCode() {

				var name = this.type == 0 ? 'resetpwd':'resetpaypwd'
				let data = {
					"mobile": this.mobile,
					"event": name,
				}

				this.api.http.requests("sms/send", data, res => {
					uni.showToast({
						title: res.msg
					})
					if(res.code == 200){
						this.getTextCode()
					}
				}, "POST")
			}

		}
	}
</script>

<style >
	page{
		background-color: white;
	}
</style>
<style scoped lang="less">
	.payment {
		padding: 10px 10px 0px 10px;
	}

	.top-card-item {
		// width: 100%;
		// height: 150upx;
		display: flex;
		padding: 10px 0px;
		align-items: center;
		border-bottom: 1rpx solid #D9D9D9;
		.item-rights{
			
			flex: 1;
			input,.mobile{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				// background-color: #D9D9D9;
				padding: 8px 5px;
				// border: 1rpx solid #D9D9D9;
				border-radius: 5px;
			}
		}
		
		.item-rights2{
			flex: 1;
			display: flex;
			justify-content: space-between;
			padding: 8px 5px;
			border-radius: 5px;
			.cpoy{
				color: white;
				padding: 2px 10px;
				background: #FE903D;
				border-radius: 20rpx;
				text-align: center;
			}
		}
	}


	.top-card-item-left {
		
		width: 80px;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.uni-input {
		width: 100%;
		border-radius: 10rpx;
		// border: 1rpx solid #D9D9D9;
	}
	
	
	


	.mobile{
		color: #B7B7B7;
	}
	.appeal-submit{
		text-align: center;
		border-radius: 5px;
		background-color: #FE903D;
		font-weight: bold;
		color: white;
		padding: 15px 10px 15px 10px;
		margin: 100px 10rpx 30px 10rpx;
	}
</style>
